<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/toutiao_logo.png" alt="">
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="$router.push('/search')" />
        </template>
      </van-nav-bar>

      <!-- tab栏导航 -->
      <div class="tab">
        <van-tabs v-model="channelID" @change="channelChangeFn" animated sticky offset-top="46">
          <van-tab :title="item.name" :name="item.id" v-for="item in userChannelsList" :key="item.id">
            <ArticleList :channelID="channelID"></ArticleList>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 编辑弹出层 -->
      <!-- 右上角‘+’号 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show = true" />
      <!-- 弹出的编辑页面 -->
      <van-popup v-model="show" :style="{ width:'100%', height: '100%' }" closeable close-icon="cross">
        <ChannelEdit :allChannelsList="allChannelsList" :userChannelsList="userChannelsList"
                     @removeChannel="removeChannelFn" @addChannel="addChannelFn" @intoChannel="intoChannelFn">
        </ChannelEdit>
      </van-popup>
    </div>

  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateUserChannelsAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './components/ChannelEdit.vue'
export default {
  name: 'Home',
  data() {
    return {
      // 频道ID
      channelID: 0, // 默认频道ID为0，推荐频道高亮
      // 频道列表
      allChannelsList: [], // 所有频道
      userChannelsList: [], // 用户已选频道
      show: false,
      channelScrollTObj: {} // 保存每个频道的滚动位置
    }
  },
  activated() {
    window.addEventListener('scroll', this.scrollFn)
    console.log(1)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  created() {
    this.GetUserChannelsFn()
    this.GetAllChannelsFn()
  },
  methods: {
    // 获取用户频道列表
    async GetUserChannelsFn() {
      const { data: res } = await getUserChannelsAPI()
      this.userChannelsList = res.data.channels
    },
    // 获取所有频道列表
    async GetAllChannelsFn() {
      const { data: res } = await getAllChannelsAPI()
      this.allChannelsList = res.data.channels
      console.log(res)
    },
    // 删除用户频道
    removeChannelFn(obj) {
      const ind = this.userChannelsList.findIndex(item => item.id === obj.id)
      this.userChannelsList.splice(ind, 1)
      this.updateChannelFn()
    },
    // 添加用户频道
    addChannelFn(obj) {
      this.userChannelsList.push(obj)
      this.updateChannelFn()
    },
    // 更新用户频道
    async updateChannelFn() {
      const newArr = this.userChannelsList.filter(item => item.id !== 0)
      const theNewArr = newArr.map((item, index) => {
        const newObj = { ...item } // 深拷贝
        delete newObj.name
        newObj.seq = index + 1
        return newObj
      })
      await updateUserChannelsAPI({ channels: theNewArr })
    },
    // 进入频道
    intoChannelFn(obj) {
      this.channelID = obj.id
      this.show = false
    },

    // 滚动条滚动事件
    scrollFn() {
      // 切换路由时保存当前页面的滚动条位置
      this.$route.meta.scrollT = document.documentElement.scrollTop
      // 保存当前频道的滚动距离
      this.channelScrollTObj[this.channelID] = document.documentElement.scrollTop
    },
    // 频道切换事件
    channelChangeFn() {
      // 当频道切回来的时候高度（height）为0，用$nextTick延后执行，先让DOM更新完毕
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelID]
        document.body.scrollTop = this.channelScrollTObj[this.channelID]
      })
    }
  },
  components: { ChannelEdit, ArticleList },
  beforedeactivated() {
    // 失去激活生命周期
    // 无组件缓存，页面被切走了，destroyed销毁生命周期方法
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
.tab {
  padding-top: 46px;
}
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
/deep/.van-icon-cross {
  color: #fff;
  font-size: 16px;
}
</style>
